<template>
	<div>
		<van-tabbar v-model="active" @change="onChange" inactive-color="#b6bec9">
			<van-tabbar-item name="index">
				<span>首页</span>
				<div slot="icon"><van-icon class="iconfont" class-prefix="icon" name="shouye" /></div>
			</van-tabbar-item>
			<van-tabbar-item name="wallet">
				<span>钱包</span>
				<div slot="icon"><van-icon class="iconfont" class-prefix="icon" name="qianbao" /></div>
			</van-tabbar-item>

			<van-tabbar-item name="scan" style="margin-bottom: 50%;">
				<div slot="icon" >
					<van-icon class="iconfont van-tabbar-item--active" class-prefix="icon" name="saoyisao1"><span>扫一扫</span></van-icon>
				</div>
			</van-tabbar-item>

			<van-tabbar-item name="near">
				<span>附近</span>
				<div slot="icon"><van-icon class="iconfont" class-prefix="icon" name="fujin" /></div>
			</van-tabbar-item>
			<van-tabbar-item name="my">
				<span>我的</span>
				<div slot="icon"><van-icon class="iconfont" class-prefix="icon" name="wode" /></div>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>

export default {
	name: 'tabbar',
	props: {},
	data() {
		return {
			active: 'index',
			icon: {}
		};
	},
	methods: {
		onChange(index) {
			this.$store.commit('getPage', index);
			this.$emit('change', index);
			this.$router.push({name: index});
		}
	},
	created() {},
	mounted() {
	let path=window.location.href
	path=path.split("/")
	console.log(path)
		if(path[4]){			
				this.active = path[4];	
		}else{
			this.active = 'index';
		}
	}
};
</script>

<style lang="scss" scoped>
.icon-saoyisao1 {
	font-size: 1.4rem;
	padding: 10px;
	background: #eaeef8;
	border-radius: 50%;
	position: relative;
	span {
		position: absolute;
		left: 0;
		right: 0;
		font-size: px2rem(8);
		bottom: px2rem(15);
		margin: 0 auto;
		text-align: center;
		z-index: 100;
		color: #d4e3f8;
	}
}
</style>
